define([
  'collections/Collection',
  'views/View',
  'views/List',
  'views/Item',
  'views/upload/PhotoAlbumModal',
  'views/media/VideoAlbumModal',
  'views/media/ImagePreview',
  'views/media/VideoPreview',
  'hbs!template/users/inbox/inbox-detail',
  'hbs!template/users/inbox/photo-list',
  'hbs!template/users/inbox/photo-item',
  'hbs!template/users/inbox/video-item',
  'swfObject'
], function(Collection, View, List, Item, PhotoAlbumModal, VideoAlbumModal, ImagePreview, VideoPreview, detail_template, list_template, item_template, video_template){
  var PhotoItem = Item.extend({
    tagName: "div",
    className: "thumbnail",
    
    template: item_template,

    events: {
      "click .thumbnail": "modalPreview"
    },

    modalPreview: function() {
      console.log("Modal preview calling");
      var position = this.collection.indexOf(this.model),
          modal;
      this.collection.pagination.setOffset(position);
      if(this.model.get("type") === 'photo')  {
        modal = new PhotoAlbumModal({collection: this.collection});
      } else {
        modal = new VideoAlbumModal({collection: this.collection});
      }
      modal.render();   
    }

  });

  
  var ItemImagePreview = ImagePreview.extend({
    flags: {
      check: false,
      progress: false,
      modal: true
    }
  });
 
  var ItemVideoPreview = VideoPreview.extend({
    template: video_template,

    initialize: function(options) {
      options || (options = {});
      _.bindAll(this, 'player');

    },

    render: function() {
      $(this.el).html(this.template(this.getRenderData()));
     
      //$(this.el).modal({"show": false, keyboard: true, "data-backdrop": true, "backdrop": true});
      return this;
    },
    
    player: function() {
      var params = { allowScriptAccess: "always" };
      var atts = { id: "ytPlayer" };

      swfobject.embedSWF(this.getURLContent(), "videoDiv", "530", "315", "9", null, null, params, atts);
    },

    getURLContent: function() {
      return this.model.get("source");
    }
    
  });
  
  
  var PhotoList = List.extend({
    template: list_template,

    renderList: function(flags) {
      this.Logger.debug("RenderList");
      // Build pagination and the body template
      var pagination = this.collection.pagination;
      // TODO temp method for testing!
      $(this.el).html(this.template(this.getRenderData()));
      var self = this;
      
      // Build the list
      var $list = this.$(".list");
      _.each(pagination.models(), function(item){
        self.Logger.debug("Render item");
        if(item.get("type") === "PHOTO") {          
	  var itemView = new ItemImagePreview({
	    model:	item,
	    collection: self.collection,
            flags: flags || this.flags
          });
        } else {
          var itemView = new ItemVideoPreview({
	    model:	item,
	    collection: self.collection,
            flags: flags || this.flags
          });
        }
        
        console.log(itemView.render().el);
	$list.append(itemView.render().el);
        if(item.get("type") === "VIDEO") {          
          itemView.player();
        }
      });

    }
  });
  
  
  var InboxDetailView = View.extend({
    template: detail_template,

    events: {
      "click button[name=back]":        "back"    
    },
    
    initialize: function(options) {
      View.prototype.initialize.call(this, options);
      this.model.bind("change", this.init, this);
    },

    init: function() {
      this.photoCollection = new Collection(this.model.get("contents"));
      this.photoCollection.pagination.setLimit(2);

      this.render();
      
    },
    
    render: function() {
      View.prototype.render.call(this);
      if(this.photoCollection) {
        var photoList = new PhotoList({el: "#media-files", collection: this.photoCollection});
        photoList.render();
      }
      return this;
    }
  });

  return InboxDetailView;
});